<template>
  <viDialog
    :yearShow="true"
    :deptShow="true"
    :visibility.sync="visibility"
    :title="title"
    unit="万元"
    :deptList="deptList"
    :projectShow="true"
    @changeDept="changeDept"
    @changeYear="changeYear"
    @changeProject="changeProject"
  >
    <div class="content-dialog-body">
      <div class="left banner">
        <div class="header">
          <label>年度</label>
          <span>单位：万元</span>
        </div>
        <viBar
          ref="reference3"
          :configurationInformation="configurationInformation"
        />
      </div>
      <div class="right banner">
        <div class="header">
          <label>累计</label>
          <span>单位：万元</span>
        </div>
        <viBar
          ref="reference4"
          :configurationInformation="configurationInformation"
        />
      </div>
    </div>
  </viDialog>
</template>

<script>
import { viDialog, viLine, viBar } from "@/components/visualization/index";
import request from "@/utils/request";
import Qs from "qs";

export default {
  name: "vi-popup-profit",
  components: {
    viDialog,
    viLine,
    viBar
  },
  props: {
    monthList: {
      default: []
    },
    deptList: {
      default: () => []
    }
  },
  data() {
    return {
      flag: 1,
      visibility: false,

      infos1: {
        showHeader: true
      },
      infos2: {
        showHeader: true
      },
      configurationInformation: {
        colors: {
          default: "#F3684B",
          active: "#1890FF"
        },
        barwidth: "24",
        title: {
          name: "",
          unit: ""
        },
        radioList: {
          radio: "",
          list: []
        },
        showHeader: true
      },
      deptId: -1,
      year: null,
      title:"",
      projectId: null,
    };
  },
  created() {
    this.gettimes()
  },
  methods: {
    changeProject(val) {
      this.projectId = val;
      this.drawBar();
    },
    gettimes() {
      const time = new Date();
      const year = time.getFullYear();
      const month = time.getMonth() + 1;
      const day = time.getDate();
      this.year=`${year}`
    },
    changeDept(val) {
      this.deptId = val;

      if (this.flag === 1) {
        this.drawBar();
      } else {
        this.draw();
      }
    },
    changeYear(val) {
      this.year = val;
      if (this.flag === 1) {
        this.drawBar();
      } else {
        this.screenAdvanceMonth();
      }
    },
    drawBar() {
      this.screenMonthProfit();
      this.screenYearProfit();
    },
    screenMonthProfit(deptId = this.deptId) {
      request({
        url: "/system/screen/monthProfit",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          year: this.year,
          projectId: this.projectId,
        })
      }).then(res => {
        const x = [];
        const y = [];
        for (const i in res.data) {
          x.push(`${i}月`);
          y.push((res.data[i] / 10000).toFixed(2) || 0);
        }
        this.drawProfit("1", x, y);
      });
    },
    screenYearProfit(deptId = this.deptId) {
      request({
        url: "/system/screen/yearProfit",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          year: this.year,
          projectId: this.projectId,
        })
      }).then(res => {
        const x = [];
        const y = [];
        for (const i in res.data) {
          x.push(`${i}`);
          y.push((res.data[i] / 10000).toFixed(2) || 0);
        }
        this.drawProfit("2", x, y);
      });
    },
    drawProfit(type = "1", xData, yData) {
      // 利润
      console.log(this.configurationInformation);
      const barwidth = "24";
      this.configurationInformation.profit = {
        ...this.configurationInformation.profit,
        barwidth,
        xData,
        yData
      };
      console.log(this.configurationInformation.profit);
      this.$refs.profit.draw(this.configurationInformation.profit);
    },
    draw() {
      this.$nextTick(() => {
        // this.drawProfit("1");
        // this.drawProfit("2");
        this.screenAdvanceMonth();
        this.screenAdvanceMonthAdvanceYear();
      });
    },
    screenAdvanceMonth(deptId = this.deptId, type) {
      request({
        url: "/system/screen/AdvanceMonth",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          year: this.year,
          projectId: this.projectId,
        })
      }).then(res => {
        let advanceMonthList = [];
        if (res.data && res.data.length > 0) {
          this.monthList.forEach((item, i) => {
            advanceMonthList.push({
              amount: 0,
              deptName: null,
              month: item,
              year: null
            });
            res.data.forEach(el => {
              if (item === el.month) {
                advanceMonthList[i] = el;
              }
            });
          });

          advanceMonthList = advanceMonthList.map(
            item => item.amount / 10000 || 0
          );
        }
        let xData = [];
        for (let i = 0; i < 12; i++) {
          xData.push(`${i + 1}月`);
        }
        this.drawProfit("1", xData, advanceMonthList);
      });
    },
    screenAdvanceMonthAdvanceYear(deptId = this.deptId, type) {
      request({
        url: "/system/screen/AdvanceYear",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          projectId: this.projectId,
        })
      }).then(res => {
        let x = [];
        let y = [];
        let keys = Object.keys(res.data);
        if (keys.length > 0) {
          keys = keys.sort();
          keys.forEach(item => {
            x.push(item);
            y.push((res.data[item] / 10000).toFixed(2) || 0);
          });
        }
        this.drawProfit("2", x, y);
      });
    },
    drawProfit(type = "1", x, y) {
      //利润
      console.log(configurationInformation);
      let configurationInformation = this.configurationInformation;
      let xData = [];
      let yData = [];
      let barwidth = "24";
      if (type === "1") {
        //年度

        barwidth = "16";
        configurationInformation.colors.default = "#F3684B";
      } else {
        //累计
        configurationInformation.colors.default = "#3EC4D9";
      }
      configurationInformation.profit = {
        ...configurationInformation,
        barwidth,
        xData: x,
        yData: y
      };
      if (type === "1") {
        this.$refs.reference3.draw(configurationInformation.profit);
      } else {
        this.$refs.reference4.draw(configurationInformation.profit);
      }
    },
    open(flag) {
      this.flag = flag;
      // flag 1 利润 2垫资情况
      const maps={
        1:"利润",
        2:"垫资情况",
      }
      this.title=maps[flag]
      this.visibility = true;
      if (flag === 1) {
        this.drawBar();
      } else {
        this.draw();
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../style/popup";
</style>
